<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="author-name" content="Mironcoder | Miron Mahmud" />
  <meta name="author-email" content="mironcoder@gmail.com" />
  <meta name="author-profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template-name" content="Vegana" />
  <meta name="template-created" content="09-November-2020" />
  <meta name="template-title" content="Vegana - vegan food eCommerce store html template" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="keywords" content="vegana, vegan, food, eCommerce, store, html, template, bootstrap, vegetarian, organic, vegetables, greengrocery, fruit, healthy, shop" />
  <title>登录</title>
  <link rel="icon" href="../assets/images/logo/01.png" />
  <link rel="stylesheet" href="../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/signin-up.css" />
 </head>
 <body>
<div id="app">
    <section class="sign-part">
        <div class="sign-content">
         <div class="content-cover"> 
          <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
          <h1>全球最大的在线纯素食品电子商务商店。</h1>
         </div>
        </div>
        <div class="sign-form">
         <div class="back-arrow"> 
          <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a> 
          <a href="../home-1.html"><i class="fas fa-arrow-left"></i></a>
         </div>
    <div class="sign-heading">
     <h2>注册</h2>
     <p>在一分钟内设置一个新帐户。</p>
    </div>
    <div class="form"> 
     <label class="form-label"> <input type="text" v-model="uname" placeholder="用户名" /></label> 
     <label class="form-label"> <input type="password"  v-model="pwd" placeholder="请输入密码" /> <button type="button"><i class="eye fas fa-eye"></i></button>  </label> 
     <label class="form-label"> <input type="password"  placeholder="请再次输入密码" /> <button type="button"><i class="eye fas fa-eye"></i></button>  </label>
     <label class="form-label"> <input type="text" v-model="email" placeholder="电子邮箱" /></label>
     <label class="form-label"> <input type="text" v-model="tel" placeholder="电话号码" /></label> 
     <label class="form-label"> <input type="text" v-model="code" placeholder="请输入手机验证码" /><button type="button" @click="sendCode">获取验证码</button></label>
     <div class="form-link">
      <div class="custom-control custom-checkbox"> 
       <input type="checkbox" class="custom-control-input" id="signup-check" /> 
       <label class="custom-control-label" for="signup-check">我同意所有条款。</label>
      </div>
     </div>
     <div class="form-btn"> 
      <button type="submit" class="btn btn-outline" @click="reg">免费注册</button>
     </div>
    </div>
    <div class="form-bottom">
     <p>已经有账户了吗? 单击 <a href="login.html">( 登录 )</a> 按钮上方的按钮。</p>
    </div>
   </div>
</section> 
</div>
<script src="../js/vue.js"></script>
<script src="../assets/source/js/vendor/jquery-1.12.4.min.js"></script> 
<script src="../assets/source/js/vendor/popper.min.js"></script> 
<script src="../assets/source/js/vendor/bootstrap.min.js"></script> 
<script src="../assets/source/js/custom/main.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
<script>
    let reg = new Vue({
        el:'#app',
        data:{
            uname:'',
            pwd:'',
            tel:'',
            email:'',
            code:'',
            flag:false
        },
        methods:{
            reg(){
                if(this.flag == true){
                    axios.post("../userController/reg",qs.stringify({
                        uname:this.uname,
                        pwd:this.pwd,
                        tel:this.tel,
                        email:this.email,
                        code: this.code
                    })).then(resp=>{
                        if(resp.data == 1){
                            location.href = "login.html";
                        }else if(resp.data == -2){
                            alert("验证码超时");
                            return;
                        }else{
                            alert("注册失败");
                            return;
                        }
                    });
                }
            },
            sendCode(){
                axios.post("../userController/sendCode",qs.stringify({
                    tel: this.tel
                })).then(resp=>{
                    if(resp.data == 1){
                        this.flag = true;
                    }else{
                        alert("获取验证码失败...");
                        return;
                    }
                });
            }
        }
    });
</script>
</body>
</html> 